<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="seach()"
            >查询</el-button
          >
          <el-button type="primary" size="mini" @click="handleAdd()"
            >添加资产</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
    >
      <el-table-column label="序号" align="center" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="园区" align="center">
        <template slot-scope="scope">
          {{ scope.row.park.name }}
        </template>
      </el-table-column>

      <el-table-column label="编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.propertyName }}
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center">
        <template slot-scope="scope">
          {{ scope.row.specifications }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="金额" align="center">
      </el-table-column>
      <el-table-column prop="isUseing" label="是否使用中" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isUseing"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isScrap" label="是否报废处理" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isScrap"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="isScrap" label="所属企业" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime | formatYmdHms }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="handleLease(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.currentPage"
        :page-sizes="[10, 15, 20, 30, 40, 50]"
        :page-size="where.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
    
    <script>
import { getAssetsList, addAssets } from "@/api/system";

export default {
  filters: {
    formatDate(value) {
      if (value) {
        return moment(value).format("YYYY-MM-DD");
      }
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      where: {
        currentPage: 1,
        pageSize: 10,
        data: {
          number: "",
          propertyName: "",
          parkId: null,
        },
      },
      form: {
        number: "004",
        propertyName: "桌子",
        type: 1, // 1 常规类 2 临时类 3 临时类
        specifications: "1.2*1.5", //  规格
        money: "1150", // 金额
        remarks: "", // 备注
        isUseing: 1, // 是否使用中
        isScrap: 0, // 是否报废
        parkId: 19,
      },
      rules: {},
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getAssetsList(obj).then((response) => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data;
        this.total = response.count;
      });
    },
    seach() {
      this.fetchData(this.where);
    },
    handleLease() {
      console.log("handleLease");
      this.$router.push({ name: "LeaseRoom" });
    },
    handleSizeChange(val) {
      //   this.where.currentPage = 1;
      this.where.pageSize = val;
      this.fetchData(this.where);
    },
    handleCurrentChange(val) {
      this.where.currentPage = val;
      this.fetchData(this.where);
    },
    handleAdd() {
      addAssets(this.form).then(() => {
        this.$message.success("添加成功");
        this.fetchData(this.where);
      });
    },
  },
};
</script>
    